<template>
    <div class="container">
        <el-form
            label-width="100px"
            :model="form"
            style="max-width: 460px"
            label-position="left"
            class="formbox"
            ref="myform"
            :rules="rules"
        >
            <el-form-item 
                label="手机号"
                prop="phone"
                >
                <el-input v-model="form.phone" clearable :prefix-icon="Iphone"/>
            </el-form-item>
            <el-form-item 
                label="验证码"
                prop="captcha"
                >
                <el-row class="row-bg">
                    <el-col :span="15"><el-input clearable v-model="form.captcha" :prefix-icon="Lock" /></el-col>
                    <el-col :span="4" :offset="1">
                        <el-button @click="getCaptchaBtn" :disabled="!disabled" type="primary" v-if="flag">发送验证码</el-button>
                        <el-button type="warning" disabled v-else>剩{{count}}s重发</el-button>
                    </el-col>
                </el-row>


            </el-form-item>
            <div class="lastitem">
                <div class="alinks">
                    <router-link :to="{name:'register'}">没有账号，去注册</router-link>
                    <router-link :to="{name:'forget'}">忘记密码？</router-link>
                </div>
            </div>
            <div class="lastitem">
                <div class="alinks">
                    <el-button block type="success" @click="LoginIn" class="btnblock">登录</el-button>
                    <el-button block type="warning" @click="resetForm" class="btnblock">重置</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script>
import {reactive ,toRefs,onMounted,ref, getCurrentInstance, computed} from 'vue' ; 
import {reg} from '@/utils/reg' ; 
import {ElMessage} from 'element-plus' ;
import {ajax} from '@/api/index' ;
import {useRouter} from 'vue-router' ; 
import {UserFilled,Lock,Iphone} from '@element-plus/icons-vue' ; 
var timer = null ; 
export default {
    setup(props){
        const state = reactive({
            form:{},
            reg,
            UserFilled,
            Lock,
            Iphone,
            flag:true,
            count:120,
            rules:{
                phone:[
                    {required:true,message:'手机号不能为空'},
                    {pattern:reg.phone,message:'请输入正确的手机号'}
                ],
                captcha:[
                    {required:true,message:'验证码不能为空'},
                    {pattern:reg.code,message:'请输入符合格式的验证码'},
                    {validator:asyncCheck,message:'验证码错误！'}
                ]
            }
        });
        const router = useRouter();
        const myform = ref();
        const {proxy} = getCurrentInstance() ;

        const disabled = computed(()=>reg.phone.test(state.form.phone))

        const asyncCheck = async (rule,value,callback)=>{
            let res = await ajax.checkCaptcha({
                phone:state.form.phone,
                captcha:value
            });
            if( res.code == 200 ){
                callback();
            } else {
                callback(new Error('验证码错误！'))
            }
        }

        const getCaptchaBtn = async ()=>{
            if( state.reg.phone.test(state.form.phone )){
                let res = await ajax.getCaptcha({phone:state.form.phone});
                if( res.code == 200 ){
                    state.flag = false ;
                    state.count -- ; 
                    // ElMessage.success('发送成功！');
                    timer = setInterval(()=>{
                        if( state.count <= 0 ){
                            state.count = 120 ; 
                            state.flag = true ;
                            clearInterval(timer);
                            timer = null ; 
                        } else {
                            state.count -- ; 
                        }
                    },1000);
                } else {
                    ElMessage.error('发送失败，请重试！');
                }
            }
        }

        const LoginIn = ()=>{
            myform.value.validate( async (valid)=>{
                if(valid){
                    let res = await ajax.byPhone({phone:state.form.phone});
                    if( res.code == 200 ){
                        router.push({path:'/index'});
                    } 
                }
            });
        }

        const resetForm = ()=>{
            myform.value.resetFields();
        }

        onMounted(()=>{
            let {phone} = proxy.$root.$route.query ; 
            if( phone ){
                 state.form = {...state.form,phone:phone}
            }
        });





        return {
            ...toRefs(state),
            getCaptchaBtn,
            LoginIn,
            resetForm,
            myform,
            disabled
        };
    }
}
</script>
<style lang="scss" scoped>
.container{
    box-sizing: border-box;
    padding: 15px 40px 0px;
    .formbox{
        height: 100%;
        ::v-deep .el-form-item__label{
            color: rgba(255,255,255,0.7);
        }
        ::v-deep .el-input__inner{
            outline:1px;
            background-color: transparent;
        }
        .lastitem .alinks{
            margin-top: 25px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            a{
                font-size: 14px;
                color: rgb(36, 182, 170);
            }
            .el-button{
                width: 48%;
                height: 35px;
            }
        }
    }
}

</style>